@page
@{ Layout = "_Layout"; }
@section Styles{
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
}
<el-form :model="form" ref="form" v-if="form" size="mini" label-width="90px">
    <el-row :gutter="3">
        <el-col :span="8">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>基本信息</span>
                </div>
                <div>
                    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-180) + 'px' }">
                        <div style="margin-right:18px;">
                            <el-form-item label="问卷名称" prop="title" :rules="{ required: true, message: '请输入名称' }">
                                <el-input v-model.trim="form.title" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="有效期" prop="examBeginDateTime" :rules="{ required: true, message: '请选择开始时间' }">
                                <el-date-picker v-model="form.examBeginDateTime"
                                                type="datetime"
                                                placeholder="开始时间"
                                                value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item prop="examEndDateTime" :rules="{ required: true, message: '请选择截止时间' }">
                                <el-date-picker v-model="form.examEndDateTime"
                                                type="datetime"
                                                placeholder="截止时间"
                                                value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="调查范围" prop="published">
                                <el-radio v-model="form.published" :label="true">公开</el-radio>
                                <el-radio v-model="form.published" :label="false">内部</el-radio>
                                <div class="tips">内部问卷需要指定用户组，需要用户登录系统填写；公开问卷只能通过二维码公布，获得二维码或者链接的用户都可以填写，不需要登录。</div>
                            </el-form-item>
                            <el-form-item label="调查范围" prop="userGroupIds" v-if="!form.published" :rules="{ required: true, message: '请选择用户组' }">
                                <el-select ref="selectUserGroup" v-model="form.userGroupIds" filterable multiple placeholder="请选择用户组" clearable style="width:100%">
                                    <el-option v-for="userGroup in userGroupList"
                                               :key="userGroup.id"
                                               :label="userGroup.groupName"
                                               :value="userGroup.id">
                                    </el-option>
                                </el-select>
                                <div class="tips">根据选择的用户组匹配需要参加的用户，多个组为并集。</div>
                            </el-form-item>
                        </div>
                    </el-scrollbar>
                </div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>问卷内容</span>
                </div>
                <div>
                    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-180) + 'px' }">
                        <div style="margin-right:18px;">
                            <div v-if="tmList && tmList.length>0">
                                <el-button icon="el-icon-upload" :size="euiSize" plain type="warning" v-on:click="btnImportTmClick">重新导入内容</el-button>
                                <div class="mt-3" v-for="(tm,tmIndex) in tmList">
                                    <el-card v-if="tm.parentId===0">
                                        <div :id="'tm_'+tm.id">
                                            <span class="mb-3 d-flex justify-content-start align-items-start">
                                                <span>{{ tm.tmIndex }}、</span>
                                                <span v-html="tm.title"></span>
                                            </span>
                                            <div class="list-group" v-if="tm.tx==='Danxuanti' || tm.tx==='Duoxuanti'">
                                                <div v-if="tm.tx==='Danxuanti'">
                                                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                                        <div class="d-flex justify-content-start align-items-start">
                                                            <div class="me-1 position-relative">
                                                                {{optionsABC[optionIndex]}}.
                                                            </div>
                                                            <div>
                                                                <span v-html="option"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="tm.tx==='Duoxuanti'">
                                                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                                        <div class="d-flex justify-content-start align-items-start">
                                                            <div class="me-1 position-relative">
                                                                {{optionsABC[optionIndex]}}.
                                                            </div>
                                                            <div>
                                                                <span v-html="option"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-if="tm.tx==='DanxuantiErwei' || tm.tx==='DuoxuantiErwei'">
                                                <table class="table table-bordered">
                                                   <tr>
                                                       <td></td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            {{ option }}
                                                       </td>
                                                   </tr>
                                                   <tr v-for="(small,smallIndex) in tm.smallList">
                                                       <td>
                                                            <span v-html="small.title"></span>
                                                       </td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            <el-radio size="mini" border v-if="tm.tx==='DanxuantiErwei'" v-model="small.answer" :label="option">
                                                                <span></span>
                                                            </el-radio>
                                                            <el-checkbox size="mini" border v-else>
                                                            </el-checkbox>
                                                        </td>
                                                   </tr>
                                                </table>
                                            </div>
                                            <div v-if="tm.tx==='DanxuantiSanwei'">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <td></td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            {{ option }}
                                                        </td>
                                                    </tr>
                                                    <tr v-for="(small,smallIndex) in tm.smallList">
                                                        <td>
                                                            <span v-html="small.title"></span>
                                                        </td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            <div class="mb-1" v-for="item in small.options">
                                                                <el-radio size="mini" border v-model="small.answers[optionIndex]" :label="option+'_'+item">
                                                                    {{ item }}
                                                                </el-radio>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div v-if="tm.tx==='DuoxuantiSanwei'">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <td></td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            {{ option }}
                                                        </td>
                                                    </tr>
                                                    <tr v-for="(small,smallIndex) in tm.smallList">
                                                        <td>
                                                            <span v-html="small.title"></span>
                                                        </td>
                                                        <td v-for="(option,optionIndex) in tm.options">
                                                            <div class="mb-1" v-for="item in small.options">
                                                                <el-checkbox size="mini" border>
                                                                    <span>{{ item }}</span>
                                                                </el-checkbox>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                            <div v-else>
                                <el-result icon="warning" title="内容设置提醒" subTitle="请手动导入问卷内容">
                                    <template slot="extra">
                                        <el-button icon="el-icon-upload" type="primary" :size="euiSize" v-on:click="btnImportTmClick">去导入</el-button>
                                    </template>
                                </el-result>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </el-card>
        </el-col>
    </el-row>
</el-form>
<el-row align="center" style="margin-top:18px;">
    <el-col :span="24" align="center">
        <el-button icon="el-icon-check" :size="euiSize" type="primary" v-on:click="btnSaveClick">保 存</el-button>
        <el-button icon="el-icon-s-promotion" :size="euiSize" plain type="primary" v-on:click="btnSubmitClick">
            <span v-if="form.submitType==='Save'">
                <span>发 布</span>
            </span>
            <span v-else>
                <span>重新发布</span>
            </span>
        </el-button>
        <el-button :size="euiSize" icon="el-icon-close" plain type="info" v-on:click="utils.closeLayerSelf">取消编辑</el-button>
    </el-col>
</el-row>
<template>
    <el-dialog title="重新发布提醒"
               :visible.sync="submitDialogVisible"
               center width="35%">
        <div>
            重新发布将清空历史数据<br /><br />
            <el-card>
                <div slot="header" class="clearfix">
                    <span>历史数据包括</span>
                </div>
                <div>
                    <el-alert title="已经提交的问卷数据"
                              type="warning" :closable="false"
                              description=""
                              show-icon>
                    </el-alert>
                    <br />
                    <el-alert title="已经生成的问卷内容"
                              type="warning" :closable="false"
                              description=""
                              show-icon>
                    </el-alert>
                </div>
            </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button icon="el-icon-check" :size="euiSize" plain type="warning" v-on:click="btnSubmitClear">重新发布</el-button>
            <el-button icon="el-icon-colose" :size="euiSize" plain type="info" v-on:click="submitDialogVisible=!submitDialogVisible">取 消</el-button>
        </span>
    </el-dialog>
</template>
<template>
    <el-dialog title="问卷内容导入"
               :visible.sync="tmImportDialogVisible"
               center width="55%">
        <div>
            <el-card>
                <el-upload ref="importTmUpload" v-show="uploadShow"
                           :drag="true"
                           :limit="1"
                           :action="urlImport"
                           :auto-upload="true"
                           :headers="{Authorization: 'Bearer ' + $token}"
                           :file-list="uploadExcelTmList"
                           :before-upload="uploadExcelTmBefore"
                           :on-progress="uploadExcelTmProgress"
                           :on-success="uploadExcelTmSuccess"
                           :on-error="uploadExcelTmError"
                           :multiple="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        <el-link :underline="false" type="primary" :href="utils.getAssetsUrl('uploadtemplates/调查问卷内容导入模版.xlsx')" target="_blank">
                            <i class="el-icon-download"></i>
                            下载导入模版
                        </el-link>
                    </div>
                </el-upload>
                <div class="text-center p-3" v-if="uploadLoading"><i class="el-icon-loading fs-2 me-2"></i>正在导入...</div>
                <div v-if="uploadResult">
                    <div class="text-success">成功导入:{{ successTotal }} 条内容</div>
                    <div v-if="errorMsgList && errorMsgList.length>0">
                        <div v-for="msg in errorMsgList" class="mt-1 text-danger">{{ msg }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button :size="euiSize" icon="el-icon-close" plain type="info" v-on:click="tmImportDialogVisible=!tmImportDialogVisible">关 闭</el-button>
        </span>
    </el-dialog>
</template>
@section Scripts{
    <script src="/sitefiles/assets/js/admin/exam/examQuestionnaireEdit.js" type="text/javascript"></script>
}
